import "./index.scss";

const BASE_URL = "https://blog-assets.jiandaoyun.com/index/home/home_template";

const LIST_ITEM = [
  {
    name: "CRM",
    info: "客户跟进、商机管理、报表分析，支持自定义销售管理流程",
    bgc: "rgba(253,146,126,.12)",
  },
  {
    name: "协同型供应商管理",
    info: "助力企业打破采供协作壁垒，实现全流程、全周期的供应链闭环管理",
    bgc: "rgba(113,186,252,.12)",
  },
  {
    name: "工程项目管理",
    info: "全方位提升项目进度、巡检、设备、物资、劳务管理效率",
    bgc: "rgba(130,232,158,.12)",
  },
  {
    name: "进销存",
    info: "解决采购、入库、销售等管理难题，快速实现进销存个性化管理",
    bgc: "rgba(244,207,84,.12)",
  },
  {
    name: "设备巡检",
    info: "一张二维码解决设备档案管理、巡检、报修、保养、预警等问题",
    bgc: "rgba(113,186,252,.12)",
  },
  {
    name: "OA",
    info: "一站式解决物资、车辆、费控、审批、日报等方面的OA管理难题",
    bgc: "rgba(214,158,248,.12)",
  },
  {
    name: "专精特新",
    info: "ERP、核心业务、现场管理、精益管理，助力信息化落地",
    bgc: "rgba(112,211,233,.12)",
    imgIndex: 9,
  },
  {
    name: "更多",
    info: "去方案中心了解更多",
    bgc: "rgba(253,146,126,.12)",
  },
];

export default function Multiple() {
  return (
    <div className="multiple">
      <div className="bricks">
        <div className="bricks-primary-title">
          丰富的行业与场景方案，开箱即用
        </div>
        <div className="list">
          {LIST_ITEM.map((item, i) => (
            <div className="list-item" key={i}>
              <div className="item-banner" style={{ background: item.bgc }}>
                <img src={`${BASE_URL}${item.imgIndex || i + 1}.png`} alt="" />
              </div>
              <div className="name">{item.name}</div>
              <div className="info">{item.info}</div>
            </div>
          ))}
        </div>
      </div>
    </div>
  );
}
